<template>
	<view style="padding-top: 30rpx;">
		<view class="froms flex align-center justify-center">
			<view class="froms-box">
				<u-form label-width="200" :model="form" ref="uForm">
					<u-form-item label="服务类型" right-icon="arrow-right" @tap.native="getServerList()">
						<u-input disabled input-align="right" @tap.native="getServerList()" v-model="form.serviceName"
							placeholder="请选择服务类型" style="pointer-events:none"/>
					</u-form-item>
					<u-form-item right-icon="arrow-right" label="车型" @tap.native="getCarModelList()">
						<u-input disabled input-align="right" @tap.native="getCarModelList()" v-model="form.modelName"
							placeholder="请选择车型" style="pointer-events:none"/>
					</u-form-item>
					<u-form-item right-icon="arrow-right" @tap.native="getCarTypeList()" label="车厢类型">
						<u-input disabled input-align="right" @tap.native="getCarTypeList()" v-model="form.typeName"
							placeholder="请选择车厢类型" style="pointer-events:none"/>
					</u-form-item>
					<u-form-item label="车牌号" @tap.native="openKeyword()">
						<u-input disabled input-align="right" @tap.native="openKeyword()" v-model="form.numberPlate"
							placeholder="请输入车牌号" style="pointer-events:none"/>
					</u-form-item>
					<u-form-item label-position="top" label="行驶证">
						<view @click="upLoudImg()" v-if="!form.drivingLicenseFront"
							class="imgs flex align-center justify-center flex-wrap">
							<view class="imgs-icon flex align-center justify-center">
								<u-icon name="photo" color="#000" size="80"></u-icon>
							</view>
							<view class="imgs-txt">
								请上传行驶证信息照片
							</view>
						</view>
						<view @click="upLoudImg()" v-else
							class="imgs unBorder flex align-center justify-center flex-wrap">
							<image :src="form.drivingLicenseFront" mode=""></image>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<!-- 提交 -->
		<view class="btn flex align-center justify-center">
			<view @click="submit()" class="btn-box flex align-center justify-center">
				提交
			</view>
		</view>


		<!-- 服务类型选择 -->
		<u-select @confirm="confirmServer" v-model="showServer" :list="serverList" value-name="serviceId"
			label-name="serviceName"></u-select>
		<!-- 车型列表 -->
		<u-select @confirm="confirmCarModel" v-model="showCarModel" :list="carModelList" value-name="modelId"
			label-name="modelName"></u-select>
		<!-- 车厢列表 -->
		<u-select @confirm="confirmCarType" v-model="showCarType" :list="carTypeList" value-name="typeId"
			label-name="typeName"></u-select>
		<!-- 车牌号键盘 -->
		<u-keyboard :mask="false" ref="uKeyboard" :tips="form.numberPlate" @change="valChange" @backspace="backspace"
			mode="car" v-model="showKeyWord"></u-keyboard>
	</view>
</template>

<script>
	import config from '../../common/config.js'
	export default {
		data() {
			return {
				form: {
					userId: uni.getStorageSync('userId'),
					typeId: '', //车厢id
					typeName: '', //车厢名称
					numberPlate: '', //车牌号
					modelId: '', //车型id
					modelName: '', //车型名称
					serviceId: '', //服务id
					serviceName: '', //服务名称
					drivingLicenseFront: '', //行驶证正面图片

				},
				showServer: false,
				serverList: [], //服务列表
				showCarModel: false,
				carModelList: [], //车型列表
				showCarType: false,
				carTypeList: [], //车厢列表
				showKeyWord: false, //是否开启车牌号键盘
				carId: '', //车辆id
			};
		},
		onLoad(option) {
			if (option.carId) {
				uni.setNavigationBarTitle({
					title: '修改车辆'
				})
				this.carId = option.carId
				this.getCarInfo()
			}

		},
		methods: {
			//获取车辆详情
			getCarInfo() {
				let data = {
					carId: this.carId
				}
				this.$Request.getT('/app/userCar/getMyCarInfo', data).then(res => {
					if (res.code == 0) {
						this.form = res.data
						delete this.form.nickName
						delete this.form.phone
						delete this.form.createTime
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			//提交
			submit() {
				if (!this.form.serviceId) {
					uni.showToast({
						title: '请选择服务类型',
						icon: 'none'
					})
					return
				}
				if (!this.form.modelId) {
					uni.showToast({
						title: '请选择车型',
						icon: 'none'
					})
					return
				}
				if (!this.form.typeId) {
					uni.showToast({
						title: '请选择车厢类型',
						icon: 'none'
					})
					return
				}
				if (!this.form.numberPlate) {
					uni.showToast({
						title: '请选择输入车牌号',
						icon: 'none'
					})
					return
				}

				if (!this.form.drivingLicenseFront) {
					uni.showToast({
						title: '请上传驾驶证信息照片',
						icon: 'none'
					})
					return
				}
				let data = JSON.parse(JSON.stringify(this.form))
				this.$Request.postT('/app/userCar/saveUserCar', data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '提交成功'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			},
			//上传图片
			upLoudImg() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: res => {
						for (let i = 0; i < 1; i++) {
							this.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								// url: config.APIHOST1 + '/alioss/upload',
								url: 'https://huoyunsj.xianmaxiong.com/sqx_fast/alioss/upload', //真实的接口地址
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									console.log(uploadFileRes)
									this.form.drivingLicenseFront = JSON.parse(uploadFileRes
										.data).data
									uni.hideLoading();
								}
							});
						}
					}
				})
			},
			//打开车辆键盘
			openKeyword() {
				this.showKeyWord = true
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.form.numberPlate += val;
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.form.numberPlate.length) this.form.numberPlate = this.form.numberPlate.substr(0, this.form
					.numberPlate.length - 1);
			},
			//选择车厢
			confirmCarType(e) {
				this.form.typeId = e[0].value
				this.form.typeName = e[0].label
			},
			//获取车厢列表
			getCarTypeList() {
				if (!this.form.serviceId) {
					uni.showToast({
						title: '请选择服务类型',
						icon: 'none'
					})
					return
				}
				let data = {
					serviceId: this.form.serviceId
				}
				this.$Request.getT('/app/carType/getCarTypeList', data).then(res => {
					if (res.code == 0) {
						this.carTypeList = res.data.records
						this.showCarType = true
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			//选择车型
			confirmCarModel(e) {
				this.form.modelId = e[0].value
				this.form.modelName = e[0].label
			},
			//获取车型
			getCarModelList() {
				if (!this.form.serviceId) {
					uni.showToast({
						title: '请选择服务类型',
						icon: 'none'
					})
					return
				}
				let data = {
					serviceId: this.form.serviceId
				}
				this.$Request.getT('/app/carModel/getCarModelList', data).then(res => {
					if (res.code == 0) {
						this.carModelList = res.data.records
						this.showCarModel = true
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			//选择服务类型
			confirmServer(e) {
				console.log(e, '--------------')
				this.form.serviceId = e[0].value
				this.form.serviceName = e[0].label
			},
			//获取服务类型列表
			getServerList() {
				this.$Request.getT('/app/serviceType/getServiceList').then(res => {
					if (res.code == 0) {
						this.serverList = res.data.records
						this.showServer = true
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>
<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.btn {
		width: 100%;
		height: 140rpx;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;

		.btn-box {
			width: 686rpx;
			height: 80rpx;
			border-radius: 8rpx;
			background-color: #02B595;
			color: #ffffff;

		}
	}

	.unBorder {
		border: none !important;
	}

	.imgs {
		width: 100%;
		height: 300rpx;
		border: 1px dashed #000;
		border-radius: 10rpx;
		align-content: center;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}

		.imgs-icon {
			width: 100%;
		}

		.imgs-txt {
			width: 100%;
			text-align: center;
		}
	}

	.froms {
		width: 100%;
		height: auto;

		.froms-box {
			width: 686rpx;
			height: 100%;
			background-color: #ffffff;
			border-radius: 16rpx;
			padding: 30rpx;
		}
	}

	.list_right {
		width: 12rpx;
		height: 20rpx;
		margin-left: 20rpx;
	}
</style>